<template>
  <div class="download fill pnx">
    <div class="title pl">本地和下载</div>
    <div class="select" @click="handleSelectDir">选择目录{{downloadPath}}</div>
    <!--<ul class="nav flex-row">
      <li @click="nav.activeLabel = item.label" v-for="item in nav.list" :key="item.label"
          :class="{active: item.label===nav.activeLabel}">
        <span>{{ item.label }}{{ item.count ? item.count : "" }}</span></li>
    </ul>-->
    <div class="content">
      <ListDisplay :list="localSongs"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator"
import Vue from "vue"
import {ipcRenderer} from "electron";
import {events} from "@/ts.d/native/events";
import {Mutation, State} from "vuex-class";
import {LocalSong} from "@/ts.d/classes/LocalSong";
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";

@Component({
  components: {ListDisplay}
})
export default class Download extends Vue {
  @State("downloadPath") downloadPath!: string

  @State("localSongs") localSongs !: LocalSong[]

  @Mutation("setDownloadPath") setDownloadPath!: (path: string) => void

  nav = {
    list: [{label: "本地歌曲", count: 0},
      {label: "下载歌曲", count: 0},
      {label: "下载视频", count: 0},
      {label: "正在下载", count: 0},],
    activeLabel: "本地歌曲"
  }

  handleSelectDir() {
    ipcRenderer.invoke(events.SELECT_DIR, {path: this.downloadPath}).then(ret=>{
      if(!ret.canceled){
        this.setDownloadPath(ret.filePaths[0])
      }
    })
  }

  registerEvents() {
    ipcRenderer.on(events.UPDATE_FILE_PERCENT, (event, args) => {
      console.log(args)
    })
  }

  mounted() {
    this.registerEvents()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.title {
  font-weight: 600;
  font-size: 35px;
}

.nav {
  li {
    padding: $pn $pl;
    margin-right: $mn;
    cursor: pointer;
  }

  .active {
    span {
      position: relative;
      color: $text-success;
    }

    span:after {
      content: "";
      width: 150%;
      height: 4px;
      background-color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $border-radius-s;
      bottom: -6px;
    }
  }
}

.select{
  margin: 0 $mn;
  cursor: pointer;
  background-color: rgba(255,255,255,0.1);
  padding: $pn;
  border-radius: $border-radius-n;
  &:hover{
    background-color: rgba(255,255,255,0.3);
  }
}
</style>
